
<template>
  <el-table
    ref="table"
    :data="columnData"
    row-key="prop"
    style="width: 100%"
    border
  >
    <el-table-column
      prop=""
      label="排序"
      width="60"
    >
      <el-tag
        disable-transitions
        class="move"
        style="cursor: move;"
      >
        <el-icon style="cursor: move;">
          <el-icon-d-caret />
        </el-icon>
      </el-tag>
    </el-table-column>
    <el-table-column
      prop="label"
      label="列名"
    >
      <template #default="scope">
        <el-tag
          round
          disable-transitions
          :effect="scope.row.hide?'light':'dark'"
          :type="scope.row.hide?'info':''"
        >
          {{ scope.row.label }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="hide"
      label="显示"
      width="60"
    >
      <template #default="scope">
        <el-switch
          v-model="scope.row.hide"
          size="small"
          :active-value="false"
          :inactive-value="true"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  props: {
    column: { type: Array, default: () => [] }
  },
  emits: ['success'],
  data() {
    return {
      columnData: this.column
    }
  },
  mounted() {
    this.rowDrop()
  },
  methods: {
    rowDrop(){
      const _this = this
      const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
      Sortable.create(tbody, {
        handle: ".move",
        animation: 200,
        ghostClass: "ghost",
        onEnd({ newIndex, oldIndex }) {
          const tableData = _this.columnData
          const currRow = tableData.splice(oldIndex, 1)[0]
          tableData.splice(newIndex, 0, currRow)
        }
      })
    }
  }
}
</script>
